<template>
  <view>
    <u-navbar
      :title="type == 1 ? '我的预约' : '购药订单'"
      back-icon-size="34"
      title-size="36"
      :border-bottom="false"
      :background="background"
      title-color="#222"
      back-icon-color="#222"
    ></u-navbar>
    <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap; background: #fff">
      <view class="" style="display: flex; align-items: center; background: #fff; height: 170rpx; margin-left: 36rpx">
        <view :class="current == k ? 'on1' : 'on'" v-for="(i, k) in list" :key="k" style="margin-right: 30rpx" @tap="(current = k), type == 1 ? getList(1) : getorder(1)">
          <view class="" style="font-size: 28rpx">
            {{ i.patient_name }}
          </view>
          <view class="" style="font-size: 24rpx">{{ i.patient_gender_text }} · {{ i.patient_age }}岁</view>
        </view>
      </view>
    </scroll-view>

    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="getList">
      <view class="" style="background: 20rpx; padding: 0 28rpx" v-if="type == 1">
        <view class="" v-for="(i, k) in getarr" :key="k" style="margin-top: 28rpx; background: #fff; border-radius: 10rpx; padding-bottom: 54rpx">
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 36rpx" @tap="joops(i)">
            <view class="" style="font-size: 32rpx; font-weight: bold">
              {{ i.date_text }}
            </view>
            <view
              class=""
              style="
                font-size: 26rpx;
                color: #1a9eff;
                width: 110rpx;
                height: 50rpx;
                background: #ffffff;
                border: 1rpx solid #1a9eff;
                border-radius: 6rpx;
                text-align: center;
                line-height: 50rpx;
              "
            >
              {{
                i.pay_status == 1 && i.order_status == 1
                  ? '待就诊'
                  : i.pay_status == 1 && i.order_status == 2
                  ? '已完成'
                  : i.pay_status == 0 && i.order_status == 1
                  ? '待支付'
                  : '已退号'
              }}
            </view>
          </view>
          <view class="" style="font-size: 28rpx; display: flex; align-items: center; padding: 0 36rpx" @tap="joops(i)">
            <view class="" style="color: #666666">就诊人</view>
            <view class="" style="padding-left: 84rpx">{{ i.patient_name }} {{ i.patient_mobile }}</view>
          </view>
          <view class="" style="font-size: 28rpx; display: flex; align-items: center; padding: 36rpx" @tap="joops(i)">
            <view class="" style="color: #666666">就诊机构</view>
            <view class="" style="padding-left: 57rpx">
              {{ i.clinic_name }}
            </view>
          </view>
          <view class="" style="font-size: 28rpx; display: flex; align-items: center; padding: 0 36rpx" @tap="joops(i)">
            <view class="" style="color: #666666">就诊医生</view>
            <view class="" style="padding-left: 57rpx">
              {{ i.doctor_info }}
            </view>
          </view>
          <view class="" style="font-size: 28rpx; display: flex; align-items: center; padding: 36rpx" @tap="joops(i)">
            <view class="" style="color: #666666">门诊类型</view>
            <view class="" style="padding-left: 57rpx">普通号</view>
          </view>
          <view class="" style="font-size: 28rpx; display: flex; align-items: center; padding: 0 36rpx" @tap="joops(i)">
            <view class="" style="color: #666666">就诊时间</view>
            <view class="" style="padding-left: 57rpx">
              {{ i.date_text }}
            </view>
          </view>

          <view
            class=""
            style="display: flex; align-items: center; justify-content: flex-end; margin-top: 28rpx; margin-right: 28rpx"
            v-if="i.pay_status == 0 && i.order_status == 1"
          >
            <view
              class=""
              style="
                font-size: 26rpx;
                color: #1a9eff;
                width: 150rpx;
                height: 50rpx;
                background: #ffffff;
                border: 1rpx solid #1a9eff;
                border-radius: 6rpx;
                text-align: center;
                line-height: 50rpx;
                margin-right: 28rpx;
              "
              @tap="(id = i.order_id), (show1 = true)"
            >
              取消订单
            </view>
            <view
              class=""
              style="
                font-size: 26rpx;
                color: #ffffff;
                width: 150rpx;
                height: 50rpx;
                background: #1a9eff;
                border: 1rpx solid #1a9eff;
                border-radius: 6rpx;
                text-align: center;
                line-height: 50rpx;
              "
              @tap="(id = i.order_id), (show = true)"
            >
              立即支付
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- tab、切换 -->
    <view class="" v-if="type == 2">
      <u-tabs :list="lists" active-color="#1A9EFF" :is-scroll="false" :current="currents" @change="change"></u-tabs>
    </view>

    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="getorder">
      <!-- 购药订单 -->
      <view class="" style="margin: 20rpx 28rpx; background: #fff" v-if="type == 2" @tap="joop(i.id)" v-for="(i, k) in programme" :key="k">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 33rpx 29rpx">
          <view class="" style="display: flex; align-items: center">
            <view class="" style="font-size: 30rpx; font-weight: bold">
              {{ i.title }}
            </view>
            <view
              class=""
              style="
                font-size: 24rpx;
                color: #1a9eff;
                width: 104rpx;
                height: 46rpx;
                background: #e4f4ff;
                border-radius: 23rpx;
                text-align: center;
                line-height: 46rpx;
                margin-left: 17rpx;
              "
            >
              {{ i.drugs_status_text }}
            </view>
          </view>
          <view class="" style="font-size: 30rpx; color: #e50014">￥{{ i.final_price }}</view>
        </view>
        <!--  -->
        <view class="" style="font-size: 24rpx; color: #666666; padding-left: 30rpx">
          {{ i.drug_shop_address }}
        </view>
        <view class="" style="font-size: 24rpx; color: #666666; padding-left: 30rpx; padding-top: 24rpx; padding-bottom: 41rpx">
          {{ i.submit_time_text }}
        </view>
      </view>
    </scroll-view>
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx">
        <view class="" style="padding: 31rpx; font-size: 32rpx; font-weight: bold">支付方式</view>
        <view
          class="flex align-center margin-top"
          @tap="radio = 1"
          style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx"
        >
          <view class="" style="display: flex; align-items: center">
            <image src="https://wenzhen.jiangkukeji360.com/static/index/zfbpay.png" mode="" style="width: 70upx; height: 70upx"></image>
            <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">微信支付</view>
          </view>

          <radio :checked="radio == 1 ? true : false" color="#1A9EFF" style="transform: scale(0.7)"></radio>
        </view>
        <view class="btn" @tap="queren">立即支付</view>
        <!-- <view class="" style="height: 30rpx;"></view> -->
      </view>
    </u-popup>

    <u-modal v-model="show1" :content="content" :show-cancel-button="true" @confirm="confirm"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      scrollTop: 0,
      list: [],
      current: 0,
      type: null,
      page: 1,
      boxHeight: '',
      getarr: [],
      page1: 1,
      programme: [],
      show: false,
      radio: 1,
      id: null,
      content: '您确定取消订单吗？',
      show1: false,
      currents: 0,
      lists: [
        {
          name: '待发药'
        },
        {
          name: '已发药'
        }
      ]
    };
  },
  onReady() {
    this.box();
  },
  onShow() {
    this.oss();
  },
  //方法
  methods: {
    change(index) {
      this.currents = index;
      this.getorder(1);
    },
    confirm() {
      this.api({
        url: '/api/register/orderStatus',
        method: 'post',
        data: {
          order_id: this.id
        }
      }).then((res) => {
        this.getList(1);
      });
    },
    queren() {
      this.api({
        url: '/api//register/pay',
        method: 'post',
        data: {
          order_id: this.id,
          type: 'wechat'
        }
      }).then((res) => {
		  console.log(res,'resresres');
        uni.requestPayment({
			provider: 'wxpay',
			timeStamp: res.data.timeStamp,
			nonceStr: res.data.nonceStr,
			package: res.data.package,
			signType: res.data.signType,
			paySign: res.data.paySign,
          success: (res) => {
            uni.showToast({
              title: '支付成功！',
              icon: 'none'
            });
            this.getList(1);
          },
          fail: function (err) {
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            });
          }
        });
      });
    },
    joops(e) {
      uni.navigateTo({
        url: '/pages/index/makedetail?id=' + e.order_id
      });
    },

    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },

    joop(e) {
      uni.navigateTo({
        url: '/user/orderdetail/orderdetail?id=' + e
      });
    },
    oss() {
      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
        if (this.type == 1) {
          this.getList(1);
        } else {
          this.getorder(1);
        }
      });
    },
    getList(e) {
      if (e == 1) {
        this.getarr = [];
        this.page = 1;
      }
      this.api({
        url: '/api//register/getMyLog',
        method: 'post',
        data: {
          page: this.page,
          patient_id: this.list[this.current].patient_id
        }
      }).then((res) => {
        this.getarr = this.getarr.concat(res.data);
        this.page++;
      });
    },

    getorder(e) {
      if (e == 1) {
        this.programme = [];
        this.page1 = 1;
      }
      this.api({
        url: '/api/drugs/myOrderList',
        method: 'post',
        data: {
          page: this.page1,
          patient_id: this.list[this.current].patient_id,
          style: this.currents + 2
        }
      }).then((res) => {
        this.programme = this.programme.concat(res.data);
        this.page1++;
      });
    }
  },
  //首页渲染
  onLoad(op) {
    this.type = op.type;
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
.on {
  padding: 21rpx 53rpx 15rpx 25rpx;
  background: #f0f0f0;
  border-radius: 20rpx;
}

page {
  background: #f8f8f8;
}

.on1 {
  padding: 21rpx 53rpx 15rpx 25rpx;

  background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
  border-radius: 20rpx;
  color: #fff;
}

.gets {
  width: 92rpx;
  height: 40rpx;
  background: #e4f4ff;
  border-radius: 20rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #1a9eff;
}
.btn {
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  margin: 60rpx 115rpx;
  text-align: center;
  color: #fff;
  line-height: 80rpx;
}
</style>
